iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

30天CSS、JS、React打造專案零組件系列 第 17

DAY17 - [JS] 擴充功能 - 倒數計時,番茄鐘

  • 分享至 

  • xImage
  •  

今日文章目錄

  • 需求說明
  • 事前準備
  • 遇到問題
  • 參考資料

需求說明

  • 下拉選單:選擇番茄鐘時間(分鐘)
  • 下拉選單:選擇休息時間(分鐘)
  • 番茄鐘結束後,直接進入休息時間 (背景與文字顏色做變換)

事前準備

  • 下拉選單:
<div class="form">
  <label for="workTime">
    <select name="workTime" id="workTime">
      <option value="">選擇番茄時間</option>
      <option value="25">25分鐘</option>
      <option value="35">35分鐘</option>
      <option value="45">45分鐘</option>
    </select>
  </label>
  <label for="breakTime">
    <select name="breakTime" id="breakTime">
      <option value="">選擇休息時間</option>
      <option value="5">5分鐘</option>
      <option value="10">10分鐘</option>
      <option value="15">15分鐘</option>
    </select>
  </label>
  <button class="addBtn">+</button>
</div>
  • JS 全域變數相關設定:
let countdown;            // 記錄倒數TimeID
let workTimeMinutes;      // 番茄時間
let breakTimeMinutes;     // 休息時間
let isPause = false;      // 是否暫停,預設為 false。
let setPause = WORKTIME;  // 確認目前暫停的是 番茄倒數 還是 休息倒數,預設為 番茄倒數。
let timeleft;             // 倒數剩餘時間

過程紀錄

  • 大致規劃:
    • 使用者點擊加入鍵
    • 取得 番茄時間 與 休息時間 (個別存在全域變數:workTimeMinutesbreakTimeMinutes)
    • handleStartBtn: 有好幾種狀況會點擊播放鍵
    • 為了要區別使用者是:(1) 番茄播放 還是 休息播放 (2)直接播放 還是 暫停後播放,會先執行以下判斷:
      1. setPause: 現在是 (1) 番茄播放 還是 休息播放
        • 針對個別倒數進行設定:背景、文字 等。
      2. isPause: 現在是 (2)直接播放 還是 暫停後播放
        • 直接播放: 結束時間計算 使用 workTimeMinutes
        • 暫停後播放: 結束時間計算 使用 timeleft
  • codepen 練習: https://codepen.io/chen-chens/pen/JjJMQqQ?editors=0011
  • 顯示效果:
    顯示效果

明天就要來把 ToDoList 跟 番茄鐘 合體了
連假開始!!大家中秋節快樂~


上一篇
DAY16 - [JS] 擴充功能 - 倒數計時,暫停、開始、結束
下一篇
DAY18 - [JS] 合體ToDoList + 番茄鐘
系列文
30天CSS、JS、React打造專案零組件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言